<template>


  <div>

    <keep-alive>

      <transition name="el-fade-in-linear">
        <login-form v-show="login_form_view"></login-form>
      </transition>
    </keep-alive>
    <nav ref="top_right" class="top-right nav_toggle">
      <a class="disc l1" @click="registerOn">
        <div>注册</div>
      </a>
      <a class="disc l2">
        <div @click="myselfManager">个人中心</div>
      </a>
      <a @click="bubble_switch" class="disc l3">
        <div>{{"泡泡："+bubbleSwitch}}</div>
      </a>
      <a class="disc l4" @click="login_form_switch">
        <div>{{isLogin}}</div>
      </a>
      <a ref="toggle" class="disc l5 toggle" @click="toggle_oppen">
        Menu
      </a>
    </nav>

  </div>

</template>
<script>
import loginForm from "@/components/login"
import {getToken,removeToken} from "@/utils/auth";
import popMessage from "@/utils/popMessage";
import {MessageBox} from "element-ui";
import Vue from "vue";
import jwtDecode from "jwt-decode";
export default {




  name: "nav_headr",
  components:{
    loginForm
  },
  data(){
    return{


      toggle_close_text:'Close',
      toggle_open_text:'Menu',
      bubbleSwitch:"开",
      login_form_view:false,
      isLogin:'登陆'
    }
  },
  mounted() {
    this.$bus.$on("changeSome",(params)=>{
      this.login_form_view = params
    });
    this.$bus.$on("changeIsLogin",(params)=>{
      this.isLogin = params
    });
    if(getToken()!=null)this.isLogin="退出"
    else this.isLogin="登陆"
  },
  methods:{
    login_form_switch()
    {


      if (getToken()!=null)
      {
        const check=removeToken();
        popMessage(true,"退出登陆","success")
        this.isLogin="登陆"
        this.afterAllClickToggle();
        this.$router.push("/index")

      }else
      {
        this.login_form_view=(this.login_form_view===true)?false:true;
        this.afterAllClickToggle();
      }
    },
    bubble_switch()
    {
      if (this.$store.getters.isBubble===false)
      {
        this.$store.dispatch("BUBBLE_SWITCH",true);
        this.bubbleSwitch="关"
      }else
      {
        this.$store.dispatch("BUBBLE_SWITCH",false);
        this.bubbleSwitch="开"
      }
      this.afterAllClickToggle();

    },
    toggle_oppen()
    {
      this.$refs.top_right.classList.toggle('open');

      if (this.$refs.top_right.classList.contains('open')) {
        this.$refs.toggle.innerHTML = this.toggle_close_text;
      } else {
        this.$refs.toggle.innerHTML = this.toggle_open_text;
      }


    },
    myselfManager()
    {
      if(getToken()!=null){

        if (jwtDecode(getToken()).roles==="admin"){window.location.href='/admin'}
        else window.location.href='/userCommon'
      }


      else
      {
        MessageBox.confirm(
            '你当前未登陆，请登陆',
            '确定登陆',
            {
              confirmButtonText: '登录',
              cancelButtonText: '取消',
              type: 'warning'
            }
        ).then(() => {

          //好家伙，通信贼好用！！！
          this.afterAllClickToggle();
          const  emiter = new Vue()
          emiter.$bus.$emit("changeSome",true)

        })
      }
    },

    afterAllClickToggle()
    {
      this.$refs.toggle.click();
    },
    registerOn()
    {
      MessageBox.confirm(
          '注册功能未开放，敬请期待',
          'Tips',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }
      ).then(() => {
        this.afterAllClickToggle()
      }).catch(()=>{this.afterAllClickToggle()})
    }
  }
}
</script>

<style scoped>
@import "./static/css/nav_css.css";
</style>
